import React, { useState } from "react";
import { TimePicker } from "@ct0/ui";
import PanelTemplate from "./panelTemplate";

export default function TimePickerPanel() {
  const [value, setValue] = useState();
  const onChange = (time, timeString) => {
    setValue({
      time,
      timeString,
    });
  };
  const data = {
    title: "TimePicker组件",
    descriptions: ["支持自定义格式的时间选择器"],
    content: {
      title: "代码演示",
      children: [
        {
          title: "基础使用",
          descriptions: "",
          component: <TimePicker onChange={onChange} showNow />,
          codeSnippet: `import { TimePicker } from '@ct0/ui'
ReactDOM.render( 
    <TimePicker 
        showNow
        onChange={onChange}
    />, mountNode)`,
        },
        {
          title: "禁用",
          descriptions: "",
          component: <TimePicker disabled value={value?.time} />,
          codeSnippet: `import { TimePicker } from '@ct0/ui'
ReactDOM.render( 
    <TimePicker 
        disabled
    />, mountNode)`,
        },
        {
          title: "浮层根据format变化",
          descriptions: "",
          component: (
            <>
              <TimePicker onChange={onChange} showNow format={"mm:ss"} />
            </>
          ),
          codeSnippet: `import { TimePicker } from '@ct0/ui'
ReactDOM.render( 
  <TimePicker onChange={onChange} showNow format="mm:ss" />, mountNode)`,
        },
      ],
    },
    componentApi: [
      {
        param: "value",
        description: "时间",
        type: "Dayjs",
        default: "",
        required: false,
      },
      {
        param: "defaultValue",
        description: "默认时间",
        type: "Dayjs",
        default: "",
        required: false,
      },
      {
        param: "onChange",
        description: "时间更改后的回调函数",
        type: "(time: Dayjs | null, timeString?: string) => void}",
        default: "",
        required: false,
      },
      {
        param: "disabled",
        description: "是否禁用",
        type: "boolean",
        default: "",
        required: false,
      },
      {
        param: "placeholder",
        description: "占位符",
        type: "string",
        default: "请选择时间",
        required: false,
      },
      {
        param: "allowClear",
        description: "是否展示清除按钮",
        type: "boolean",
        default: "true",
        required: false,
      },
      {
        param: "format",
        description: "展示的时间格式",
        type: "string",
        default: "HH:mm:ss",
        required: false,
      },
      {
        param: "showNow",
        description: "是否显示此刻",
        type: "boolean",
        default: "false",
        required: false,
      },
      {
        param: "className",
        description: "根节点添加类名",
        type: "string",
        default: "",
        required: false,
      },
      {
        param: "style",
        description: "是否显示此刻",
        type: "CSSProperties",
        default: "",
        required: false,
      },
    ],
  };
  return <PanelTemplate {...data} />;
}
